<template>
    <div>
        <div style="padding: 5px 0">
            <el-input v-model="text" style="width: 200px" > </el-input>
      <el-button type="primary" size="mini" @click="load" style="margin-left: 10px">查询</el-button>
            <!--      <el-button @click="add" type="primary" size="mini" style="margin: 10px">新增</el-button>-->
        </div>
        <el-table :data="tableData"style="width: 100%">
            <el-table-column prop="id" label="ID" width="100" sortable> </el-table-column>
            <el-table-column prop="content" label="内容"> </el-table-column>
            <el-table-column prop="time" label="评论时间"> </el-table-column>
            <el-table-column label="图片" width="450px">
                <template slot-scope="scope">
                    <div style="display: flex;width: 450px">
                        <el-image style="width: 100px; height: 100px;margin-right: 10px" v-for="item in JSON.parse(scope.row.imgs)" :src="item" :preview-src-list="[item]"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="评论人"> </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum" background
                :page-size="pageSize"
                :page-sizes="[2, 5, 10]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
import API from '../../utils/request'

const url = "/api/message"

export default {
    name: "Log",
    data() {
        return {
            text: '',
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            entity: {},
            dialogFormVisible: false
        };
    },
    created() {
        this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
        this.load()
    },
    methods: {
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        },
        load() {
            API.get(url + "/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.text
                }
            }).then(res => {
                this.tableData = res.data.records || []
                this.total = res.data.total
            })
        },
        add() {
            this.entity = {}
            this.dialogFormVisible = true
        },
        edit(obj) {
            this.entity = JSON.parse(JSON.stringify(obj))
            this.dialogFormVisible = true
        },
        save() {
            if (!this.entity.id) {
                API.post(url, this.entity).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "操作成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load()
                    this.dialogFormVisible = false
                })
            } else {
                API.put(url, this.entity).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "操作成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load()
                    this.dialogFormVisible = false
                })
            }
        },
        del(id) {
            API.delete(url + id).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: "success",
                        message: "操作成功"
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg
                    })
                }
                this.load()
            })
        }
    },
};
</script>

<style scoped>
</style>
